<template>
    <div class="upload-container">
        <el-upload
                :data="dataObj"
                multiple
                :limit="limit"
                :list-type="listType"
                :show-file-list="showFileList"
                :before-upload="beforeAvatarUpload"
                class="avatar-uploader"

                accept=".jpg,.jpeg,.png,.gif,.bmp,.JPG,.JPEG,.GIF,.BMP"
                :on-remove="rmImage"
                :on-exceed="outLimit"
                :file-list="fileList"
                :auto-upload="true"
                :http-request="uploadSectionFile"
                action="123"
        >
            <i class="el-icon-upload"></i>
            <div class="el-upload__text"><em>点击上传</em></div>
            <!--            <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>-->
        </el-upload>
    </div>
</template>

<script>
    // import {uploadpic} from '../../../../api/singleImage';


    export default {
        name: 'SingleImageUpload',
        props: {
            limit: {type: Number, default: 1}, //限定数量
            listType: {type: String, default: 'picture'}, //限定展示方式 text/picture/picture-card
            pathname: {type: String, default: 'file'},
            showFileList: {type: Boolean, default: true} //是否显示文件列表
        },
        data() {
            return {
                dialogVisible: false,
                dialogImageUrl: "",
                fileMsgAndUrl: [], //图片UID和url
                fileUrlList: [], // 路径url
                fileList: [], //文件列表
                tempUrl: '',
                dataObj: {Authorization: ''}
            };
        },
        mounted() {

        },
        methods: {
            // 上传图片之前
            beforeAvatarUpload(file) {
                const isLt10M = file.size / 1024 / 1024 < 10;
                if (!isLt10M) {
                    this.$message.error('上传图片大小不能超过 10MB!');
                }
                return isLt10M;
            },
            async uploadpic(param) {
                // return request({
                //     url: '/picture/upload',
                //     method: 'post',
                //     data: param
                // });
                return this.$axios.post('/picture/upload', param)
                    .then(response => {
                        response = response.data
                        console.log(response)
                    }).catch(error => {
                        console.error(error);
                    });
            },
            //上传图片
            async uploadSectionFile(param) {
                var fileObj = param.file;
                // FormData 对象
                var form = new FormData();
                // 文件对象
                form.append(this.pathname, fileObj);
                let _this = this;
                // let res = await this.uploadpic(form)
                this.$axios.post('/picture/upload', form).then(response => {
                    let res = response.data
                    if (res.status === 200) {
                        let url = {
                            uid: fileObj.uid,
                            url: res.data.list[0]
                        };
                        console.log(res.data.list[0]);
                        _this.fileMsgAndUrl.push(url);
                        // _this.dialogImageUrl = res.data.list[0]
                        // _this.dialogVisible = true
                        _this.fileUrlList.push(res.data.list[0]);
                        // 上传成功
                        _this.$emit('uploadSuccess', _this.fileUrlList);
                    } else {
                        // 上传失败
                        _this.$emit('error', res.message);
                    }
                    // console.log(response)
                }).catch(error => {
                    console.error(error);
                });
                // console.log(res);


            },
            init() {
                // this.dataObj.Authorization = getToken();
                this.rmImages();
            },
            //文件数量超出限制
            outLimit() {
                // this.$emit("outLimit","文件超出限制" );
                this.$message({
                    message: '文件数量超出限制',
                    type: 'warning'
                });
            },
            //删除已经上传的文件  val是文件
            rmImage(val) {
                this.fileMsgAndUrl = this.fileMsgAndUrl.filter(
                    item => item.uid !== val.uid
                );
                this.fileUrlList = this.fileMsgAndUrl.map(item => item.url);
                this.$emit('uploadSuccess', this.fileUrlList);
            },
            //清空所有
            rmImages() {
                this.fileUrlList = [];
                this.fileList = [];
                this.fileUrlList = [];
                // this.$emit('uploadSuccess', []);
            }

        }
    };
</script>
<style>
    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }

    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }

    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
    }

    .avatar {
        width: 178px;
        height: 178px;
        display: block;
    }
</style>